// 筛选框图表
import { Checkbox, Col, DatePicker, Form, InputNumber, Radio, Row, Select, Slider } from 'antd';
import React from 'react';
import styles from './index.module.scss';
import moment from 'moment';
import {
	FIRST_CODE,
	LAST_CODE,
	ALL_CODE,
	CUSTOM_CODE,
	WD_TYPE,
	NO_FILTER_TYPES,
} from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/EnumConfig';
import { getComponentData } from 'src/services/AnalyseManage/index';
import { FormInstance } from 'antd/lib/form';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { dateFormat, debounce } from 'src/libs/utils';
const { Option } = Select;
const { RangePicker } = DatePicker;
interface IProps {
	isCurrent: boolean;
	config: any;
	key: string;
	id: string;
	pageId: string;
	chartLayout: any;
	chartsConfig: any;
	onAllValuesChange: ( values: Object, pageConfig?: Object ) => void;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
}

const DEFAULT_RANGE: [number, number] = [ 0, 0 ];
// const CONDITION_NAMES = [
// 	'filterRangeCondition',
// 	'filterSingleCondition',
// 	'filterMulCondition',
// 	'filterDateRangeCondition',
// 	'filterDateCondition',
// ];

const CURRENT_NAMES = {
	showTypeSingle: {
		currentType: 'showTypeSingle',
		currentTypeName: 'defaultValueSingle',
		optionsName: 'options',
		tableType: 'base',
	},
	showTypeMul: {
		currentType: 'showTypeMul',
		currentTypeName: 'defaultValueMul',
		optionsName: 'options',
		tableType: 'base',
	},
	datePicker: {
		currentType: 'datePicker',
		currentTypeName: 'defaultValueDate',
		optionsName: 'dateOptions',
		tableType: 'range',
	},
	dateRangePicker: {
		currentType: 'dateRangePicker',
		currentTypeName: 'defaultValueDaterange',
		optionsName: 'dateOptions',
		tableType: 'range',
	},
	dataRangePicker: {
		currentType: 'dataRangePicker',
		currentTypeName: 'defaultValueDatarange',
		optionsName: 'sliderRangeOption',
		tableType: 'range',
	},
};

class Filter extends React.Component<IProps> {
	state: any = {
		// options: [
		// 	{ label: 'Apple', value: 'Apple' },
		// 	{ label: 'Pear', value: 'Pear' },
		// 	{ label: 'Orange', value: 'Orange' },
		// ],
		// dateOptions: [ { value: moment( '2020-01-01' ) }, { value: moment( '2021-01-01' ) } ],
		// sliderRangeOption: [ 0, 100 ],
		options: [],
		dateOptions: [],
		sliderRangeOption: [],

		defaultFormValue: {},

		currentType: 'showTypeSingle',
		marks: {
			0: '0',
			26: '26',
			37: '37',
			100: '100',
		},

		sliderRange: DEFAULT_RANGE,
		sliderValue1: 0,
		sliderValue2: 0,
		precision: '',
		dataUnit: ''
	};

	formRef = React.createRef<FormInstance>();

	componentDidMount() {
		// this.formRef = React.createRef<FormInstance>();

		const { showTypeSingle, showTypeMul, rangeSelect, datePicker, dateRangePicker } = this.props.config.style;
		let currentType: string = '',
			updateState = {};

		if ( showTypeSingle ) {
			currentType = CURRENT_NAMES['showTypeSingle'].currentType;
		}
		if ( showTypeMul ) {
			currentType = CURRENT_NAMES['showTypeMul'].currentType;
		}
		if ( datePicker ) {
			currentType = CURRENT_NAMES['datePicker'].currentType;
		}
		if ( dateRangePicker ) {
			currentType = CURRENT_NAMES['dateRangePicker'].currentType;
		}
		if ( rangeSelect ) {
			currentType = CURRENT_NAMES['dataRangePicker'].currentType;
			let rangeSelect = this.props.config.data.rangeSelect || [];
			updateState = {
				sliderRange: rangeSelect,
				sliderValue1: rangeSelect.length >= 1 ? rangeSelect[0] : 0,
				sliderValue2: rangeSelect.length >= 1 ? rangeSelect[1] : 0,
			};
		}

		// let data = this.props.config.data;
		let data = { [currentType]: this.props.config.data[currentType] };
		data.datePicker = data.datePicker ? moment( data.datePicker ) : '';
		data.dateRangePicker =
			data.dateRangePicker && data.dateRangePicker.length === 2
				? [ moment( data.dateRangePicker[0] ), moment( data.dateRangePicker[1] ) ]
				: '';

		setTimeout( () => {
			this.setState( { currentType: currentType, defaultFormValue: data, ...updateState }, () => {
				return;
			} );
		}, 0 );

		this.getOptionsByFields( currentType, true );
	}

	shouldComponentUpdate( nextProps: Readonly<IProps>, nextState: Readonly<{}>, nextContext: any ): boolean {
		// if ( nextProps.isCurrent ) return true;
		// return false;
		return true;
	}

	getSnapshotBeforeUpdate( prevProps: Readonly<IProps>, prevState: Readonly<{}> ): any | null {
		let { config } = this.props;
		let changeObj = Object.create( null );
		//	判断数据字段是否变化了
		if ( JSON.stringify( prevProps.config.data ) !== JSON.stringify( config.data ) ) {
			changeObj.needDataChange = true;
			const { data: prevDataConfigs } = prevProps.config;
			const { data: currentDataConfigs } = this.props.config;
			const currentTypeName = CURRENT_NAMES[this.state.currentType].currentTypeName;

			if ( prevDataConfigs[currentTypeName] !== currentDataConfigs[currentTypeName] ) {
				// 更新默认取值
				changeObj.needUpdateDefault = true;
			}
			if (
				prevDataConfigs[currentTypeName] === CUSTOM_CODE &&
				( ( currentDataConfigs.defaultValueCustom &&
					prevDataConfigs.defaultValueCustom !== currentDataConfigs.defaultValueCustom ) ||
					( currentDataConfigs.defaultValueCustomStart &&
						prevDataConfigs.defaultValueCustomStart !== currentDataConfigs.defaultValueCustomStart ) ||
					( currentDataConfigs.defaultValueCustomEnd &&
						prevDataConfigs.defaultValueCustomEnd !== currentDataConfigs.defaultValueCustomEnd ) )
			) {
				// 更新默认取值
				changeObj.needUpdateDefault = true;
			}
			if ( JSON.stringify( prevDataConfigs.valueFields ) !== JSON.stringify( currentDataConfigs.valueFields ) ) {
				
				changeObj.needUpdateOptions = true;
			}
			if (
				JSON.stringify( prevDataConfigs.filtersDataType ) !== JSON.stringify( currentDataConfigs.filtersDataType )
			) {
				changeObj.needUpdateCharts = true;
			}
			if (
				currentDataConfigs.tableName &&
				JSON.stringify( prevDataConfigs.tableName ) !== JSON.stringify( currentDataConfigs.tableName )
			) {
				changeObj.needSetFilterCharts = true;
			}
		}

		return changeObj;
	}

	componentDidUpdate( prevProps: Readonly<IProps>, prevState: Readonly<{}>, snapshot?: any ) {
		if ( snapshot.needUpdateCharts ) {
			// 需要更新过滤数据 更新当前图表变化的数据
			let name = this.state.currentType,
				value = this.props.config.data[name] || '';
			this.handleSearch( { [name]: value } );
		}
		if ( snapshot.needUpdateDefault ) {
			this.getValueByDefaultvalue();
		}

		if ( snapshot.needUpdateOptions ) {
			// 更新options取值
		
			if( this.props.config.data.valueFields && this.props.config.data.valueFields.length ) {
				this.getOptionsByFields();
			}
			
		}
		if ( snapshot.needSetFilterCharts ) {
			// 当选择的数据源tablename发生变化时，需要默认全选需要过滤的图表
			this.setFilterCharts();
		}
	}

	setFilterCharts = () => {
		const { chartsConfig, onValuesChange, config } = this.props;

		// 查询需要过滤的组件类型，比如 table
		let defaultCharts = chartsConfig
			.filter( ( item ) => {
				return (
					NO_FILTER_TYPES.indexOf( item.type.toUpperCase() ) === -1 &&
					item.data.tableName === config.data.tableName
				);
			} )
			.map( ( item ) => {
				return item.key;
			} );

		onValuesChange( config.type, config.key, { filtersDataType: defaultCharts }, 'data' );
	};

	/**
	 * @author: 重置state 的数据
	 * @desc:
	 * @param {*}
	 */
	resetState = () => {
		this.setState( {
			options: [],
			dateOptions: [],
			sliderRangeOption: [],

			// defaultFormValue: {},

			marks: {
				0: '0',
				26: '26',
				37: '37',
				100: '100',
			},

			sliderRange: DEFAULT_RANGE,
			sliderValue1: 0,
			sliderValue2: 0,
		} );
		if ( this.formRef.current ) {
			this.formRef.current.resetFields();
		}
	};

	/**
	 * @author:can
	 * @desc: 取值字段改变时，更新 options 的列表值
	 * @param {*}
	 */
	getOptionsByFields = async ( currentType?: string, init?: boolean ) => {
		// 如果是数据范围查询需要将 quota 字段设置为 WD, 其他不需要
		const columns = this.props.config.data.valueFields || [];
		if ( !( columns && columns.length ) ) {
			// 清空选择的字段的时候需要清空选择的数据和options
			this.resetState();
			return;
		}

		if ( !currentType ) {
			currentType = this.state.currentType;
		}

		const columnsX = columns.map( ( item ) => {
			return {
				id: item.name,
				alias: item.alias,
				dataType: item.dataType,
				frontendId: item.frontendId,
				quota:
					item.modelType === WD_TYPE || currentType === CURRENT_NAMES['dataRangePicker'].currentType
						? 'WD'
						: 'DL',
				type: item.type,
				// 排序方式
				// orderType: item.orderType || '',
				// 聚合方式
				aggregateType: item.aggregateType || '',
				// 日期聚合方式
				formatType: item.formatType || '',
				dataUnit: item.dataUnit || '',
				precision: item.precision
			};
		} );
		let request = {
			type: 'filter',
			dataConfig: {
				dataModel: {
					pageId: this.props.pageId,
					tableName: this.props.config.data.tableCode,
					// tableName: 'ORDERS_USCA_BI',
					x: columnsX,
				},
				tableType: CURRENT_NAMES[currentType].tableType,
			},
		};
		let pageResponse = await getComponentData( request );
		if ( pageResponse.data && pageResponse.data.success ) {
			let { rows = [] } = pageResponse.data.data || {};
			if (
				currentType === CURRENT_NAMES['showTypeSingle'].currentType ||
				currentType === CURRENT_NAMES['showTypeMul'].currentType
			) {
				// 获取单选多选options取值
				let options = rows.map( ( item ) => {
					return {
						label: item.value,
						value: item.value,
					};
				} );
				this.setState( { options: options } );
			}
			if (
				( currentType === CURRENT_NAMES['dateRangePicker'].currentType ||
					currentType === CURRENT_NAMES['datePicker'].currentType ) &&
				rows.length
			) {
			// 获取日期日期范围options取值
				if( rows[0] ) {
					const { MIN, MAX } = rows[0];

					let options = [ { value: moment( MIN ) }, { value: moment( MAX ) } ];

					this.setState( { dateOptions: options } );
				}  else {
					this.setState( { dateOptions: [] } );

				}
			}
			if ( currentType === CURRENT_NAMES['dataRangePicker'].currentType && rows.length ) {
				const { MIN, MAX, precision = '', dataUnit = '' } = rows[0];

				let newState: any = {
					sliderRangeOption: [ MIN, MAX ],
					marks: {
						[MIN]: `${precision === '' ? MIN : MIN.toFixed( precision )}${dataUnit}`,
						[MAX]: `${precision === '' ? MAX : MAX.toFixed( precision )}${dataUnit}`
					},
				};
				if ( !init ) {
					newState = {
						...newState,
						sliderRange: [ MIN, MAX ],
						sliderValue1: MIN || 0,
						sliderValue2: MAX || 0,
						precision: precision,
						dataUnit: dataUnit
					};
				}
				// 数据范围变化取值
				this.setState( { ...newState } );
			}
		}
	};

	/**
	 * @author:can
	 * @desc: 默认值改变时，更新默认取值
	 * @param {*}
	 */
	getValueByDefaultvalue = () => {
		const options = this.state[CURRENT_NAMES[this.state.currentType].optionsName];

		if ( !( options && options.length ) ) return;

		let defaultValue: any;

		const valueConfig = this.props.config.data[CURRENT_NAMES[this.state.currentType].currentTypeName];

		if ( valueConfig === FIRST_CODE ) {
			// 默认为第一项
			defaultValue = options[0].value;
		}
		if ( valueConfig === LAST_CODE ) {
			// 默认为最后一项
			defaultValue = options[options.length - 1].value;
		}
		if ( valueConfig === ALL_CODE ) {
			// 默认为全部
			defaultValue = options.map( ( item ) => {
				return item.value;
			} );
			if ( this.state.currentType === 'dataRangePicker' ) {
				this.onRangeChange( options, null );
				return;
			}
		}
		const { defaultValueCustom } = this.props.config.data;

		if ( valueConfig === CUSTOM_CODE ) {
			// 自定义 默认值
			if ( defaultValueCustom ) {
				if ( this.state.currentType === 'showTypeSingle' ) {
					// 单选筛选
					const item = options.find( ( item ) => item.label === defaultValueCustom );
					defaultValue = item ? item.value : '';
				}
				if ( this.state.currentType === 'showTypeMul' ) {
					// 多选筛选
					defaultValue = defaultValueCustom.split( ',' ).map( ( item ) => {
						const vItem = options.find( ( v ) => v.label === item );
						return vItem ? vItem.value : '';
					} );
				}
				if ( this.state.currentType === 'datePicker' ) {
					// 日期筛选
					defaultValue = moment( defaultValueCustom );
				}
			}

			if ( this.state.currentType === 'dateRangePicker' ) {
				// 日期范围筛选
				const { defaultValueCustomStart, defaultValueCustomEnd } = this.props.config.data;

				if ( defaultValueCustomStart && defaultValueCustomEnd ) {
					defaultValue = [ moment( defaultValueCustomStart ), moment( defaultValueCustomEnd ) ];
				}
			}
			if ( this.state.currentType === 'dataRangePicker' ) {
				// 数据范围自定义默认值
				const { defaultValueCustomStart, defaultValueCustomEnd } = this.props.config.data;
				if ( defaultValueCustomStart && defaultValueCustomEnd ) {
					defaultValue = [ defaultValueCustomStart, defaultValueCustomEnd ];
					this.onRangeChange( defaultValue, null );
					return;
				}
			}
		}

		if ( !defaultValue ) return;

		this.formRef.current.setFieldsValue( { [this.state.currentType]: defaultValue } );
		this.handleSearch( { [this.state.currentType]: defaultValue } );
	};

	// 数据范围 选择数据变化
	onRangeChange = ( value, index ) => {
		console.log( value, index );
		let rangeSelect = [];

		if ( index === null ) {
			rangeSelect = value;
		} else {
			rangeSelect = this.state.sliderRange;
			rangeSelect[index] = value;
		}
		this.setState(
			{
				sliderRange: rangeSelect,
				sliderValue1: rangeSelect.length >= 1 ? rangeSelect[0] : 0,
				sliderValue2: rangeSelect.length >= 1 ? rangeSelect[1] : 0,
			},
			() => {
				return;
			}
		);
		this.formRef.current.setFieldsValue( { dataRangePicker: rangeSelect } );
		this.handleValuesChange( { dataRangePicker: rangeSelect }, {}, 'data' );
	};

	handleSearch = ( changedValue?: any ) => {
		const { valueFields = [] } = this.props.config.data;
		const value = changedValue[this.state.currentType];

		if ( !valueFields.length || !value || ( !value.length && this.state.currentType !== 'datePicker' ) ) {
			this.updateOtherChartsConfigs( [] );
			return;
		}

		let conditions: any = [];

		const ids = [ valueFields[0].name ];
		if ( this.state.currentType === 'showTypeSingle' ) {
			conditions = [
				{
					id: ids,
					quota: valueFields[0].modelType === WD_TYPE ? 'WD' : 'DL',
					symbol: 'EQ',
					value: [ value ],
					formatType: valueFields[0].formatType,
				},
			];
		}
		if ( this.state.currentType === 'datePicker' ) {
			conditions = [
				{
					id: ids,
					formatType: valueFields[0].formatType,
					quota: valueFields[0].modelType === WD_TYPE ? 'WD' : 'DL',
					symbol: 'EQ',
					value: [ dateFormat( value, 'yyyy-MM-dd' ) ],
				},
			];
		}
		if ( this.state.currentType === 'showTypeMul' ) {
			// let newValue = value.map( ( item ) => {
			// 	return `'${item}'`;
			// } );

			conditions = [
				{
					id: ids,
					quota: valueFields[0].modelType === WD_TYPE ? 'WD' : 'DL',
					symbol: 'IN',
					value: value,
					formatType: valueFields[0].formatType,
				},
			];
		}
		if ( this.state.currentType === 'dataRangePicker' ) {
			conditions = [
				{
					id: ids,
					quota: 'WD',
					symbol: 'GTE',
					value: [ value[0] ],
					formatType: valueFields[0].formatType,
				},
				{
					id: ids,
					quota: 'WD',
					symbol: 'LTE',
					value: [ value[1] ],
					formatType: valueFields[0].formatType,
				},
			];
		}
		if ( this.state.currentType === 'dateRangePicker' ) {
			conditions = [
				{
					id: ids,
					quota: valueFields[0].modelType === WD_TYPE ? 'WD' : 'DL',
					formatType: valueFields[0].formatType,
					symbol: 'GTE',
					value: [ dateFormat( value[0], 'yyyy-MM-dd' ) ],
				},
				{
					id: ids,
					formatType: valueFields[0].formatType,
					quota: valueFields[0].modelType === WD_TYPE ? 'WD' : 'DL',
					symbol: 'LTE',
					value: [ dateFormat( value[1], 'yyyy-MM-dd' ) ],
				},
			];
		}
		this.updateOtherChartsConfigs( conditions );
	};

	// 更改其他项需要过滤的配置
	updateOtherChartsConfigs = ( conditions: any ) => {
		const { chartsConfig, onAllValuesChange, config } = this.props;
		const { filtersDataType = [], valueFields } = this.props.config.data;

		// if( conditions.length === 0 ) return; 

		console.log( 'updateConfig' );
		if( valueFields === undefined ) return;

		const newChartConfig = JSON.parse( JSON.stringify( chartsConfig ) );

		const newComps = newChartConfig.map( ( item ) => {
			if ( NO_FILTER_TYPES.indexOf( item.type.toUpperCase() ) !== -1 ) {
				// 如果是不需要过滤的图表类型, 忽略掉更新 config
				return item;
			}

			let oldConditions = item.data.filterConditions || {};
			if ( oldConditions[config.key] ) {
				delete oldConditions[config.key];
			}

			if ( filtersDataType.some( ( v ) => v === item.key ) ) {
				// 修改需要过滤的组件的 conditions
				oldConditions[config.key] = conditions;
				return { ...item, data: { ...item.data, filterConditions: oldConditions } };
			} else {
				// 删除不需要过滤的组件的 conditions
				return { ...item, data: { ...item.data, filterConditions: oldConditions } };
			}
		} );

		onAllValuesChange( newComps );
	};

	// 设置日期可选范围
	disabledDate = ( current, type?: string ) => {
		return (
			current &&
			( current < moment( this.state.dateOptions[0].value ) || current > moment( this.state.dateOptions[1].value ) )
		);
	};

	// 更新选择的值 同时需要查询过滤后的数据
	handleValuesChange = ( changedValues, allValues, configType ) => {
		const { onValuesChange, config } = this.props;
		onValuesChange( config.type, config.key, changedValues, configType );
		this.handleSearch( changedValues );
	};

	handleSingleChoiceClear = ( value ) => {
		// 单选当选中再次点击得时候取消选中的值
		if( value === this.formRef.current.getFieldValue( 'showTypeSingle' ) ) {
			this.formRef.current.setFieldsValue( { showTypeSingle: '' } );
			this.handleValuesChange( { showTypeSingle: '' }, {}, 'data' );
		}
		
	};

	render() {
		const { config } = this.props;
		const { showTypeSingle, showTypeMul, rangeSelect, filterColorTheme,
			 datePicker, dateRangePicker, chartBackgroundColor } = config.style;
		const borderColor = filterColorTheme === 'light' ? '#fff' : '#000';
		const fontColor = filterColorTheme === 'light' ? '#000' : '#fff';
		console.log( borderColor, fontColor );
		let { options } = this.state;
		const noOptionData = !this.state[CURRENT_NAMES[this.state.currentType].optionsName].length;

		return (
			<div className={styles.filter_container}>
				{!noOptionData && (
					<Form
						labelAlign="left"
						layout="horizontal"
						ref={this.formRef}
						initialValues={this.state.defaultFormValue}
						size="large"
						onValuesChange={debounce(
							( changedValues, allValues ) => this.handleValuesChange( changedValues, allValues, 'data' ),
							500
						)}
						className={styles.filter_container_form}
					>
						{showTypeSingle === 'FilterSingle' && (
							<Form.Item name="showTypeSingle">
								<Radio.Group>
									{ options.map( v => {
										return <Radio.Button style={{ backgroundColor: chartBackgroundColor, borderColor: borderColor, color: fontColor }} 
											onClick={ () => this.handleSingleChoiceClear( v.value ) } key={v.value} value={v.value}>{v.label}</Radio.Button>;
									} )}
								</Radio.Group>								
							</Form.Item>
						)}
						{showTypeMul === 'FilterMul' && (
							<Form.Item name="showTypeMul">
								<Checkbox.Group style={{ color: fontColor }} options={options} />
							</Form.Item>
						)}
						{showTypeSingle === 'SelectSingle' && (
							<Form.Item name="showTypeSingle">
								<Select defaultValue={options[0].value} style={{ backgroundColor: chartBackgroundColor, borderColor: borderColor, color: fontColor }} allowClear showSearch>
									{options.map( ( t ) => {
										return (
											<Option key={t.value} value={t.value}>
												{t.label}
											</Option>
										);
									} )}
								</Select>
							</Form.Item>
						)}
						{showTypeMul === 'SelectMul' && (
							<Form.Item name="showTypeMul" valuePropName="checked">
								<Select style={{ backgroundColor: chartBackgroundColor, borderColor: borderColor, color: fontColor  }} mode="multiple" allowClear showSearch>
									{options.map( ( t ) => {
										return (
											<Option key={t.value} value={t.value}>
												{t.label}
											</Option>
										);
									} )}
								</Select>
							</Form.Item>
						)}
						{rangeSelect && (
							<Form.Item name="dataRangePicker">
								<Row gutter={16}>
									<Col span={3}>
										<InputNumber
											onChange={( value ) => this.onRangeChange( value, 0 )}
											value={this.state.sliderValue1}
											size="small"
											style={{ width: '100%' }}
										/>
									</Col>
									<Col span={18}>
										{/* {JSON.stringify( this.state.sliderRange )},{this.state.sliderValue1},
										{this.state.sliderValue2}, */}
										<Slider
											tipFormatter={( value ) => `${ this.state.precision === '' ? value : value.toFixed( this.state.precision ) }${this.state.dataUnit}`}
											onChange={( value ) => this.onRangeChange( value, null )}
											value={this.state.sliderRange}
											max={this.state.sliderRangeOption[1]}
											min={this.state.sliderRangeOption[0]}
											marks={this.state.marks}
											range
										/>
									</Col>
									<Col span={3}>
										<InputNumber
											onChange={( value ) => this.onRangeChange( value, 1 )}
											value={this.state.sliderValue2}
											size="small"
											style={{ width: '100%' }}
										/>
									</Col>
								</Row>
							</Form.Item>
						)}
						{datePicker && (
							<Form.Item name="datePicker">
								<DatePicker
									style={{ width: '100%', backgroundColor: chartBackgroundColor, borderColor: borderColor, color: fontColor  }}
									disabledDate={( current ) => this.disabledDate( current, 'datePicker' )}
									// onChange={debounce( ( date, dateStr ) => {
									// 	console.log( 'date', date );
									// }, 500 )}
									locale={locale}
								/>
							</Form.Item>
						)}
						{dateRangePicker && (
							<Form.Item name="dateRangePicker">
								<RangePicker
									disabledDate={( current ) => this.disabledDate( current, 'dateRangePicker' )}
									style={{ width: '100%', backgroundColor: chartBackgroundColor, borderColor: borderColor, color: fontColor  }}
									locale={locale}
								/>
							</Form.Item>
						)}
					</Form>
				)}
				{noOptionData && <div style={{ color: 'red', margin: '10px 0' }}>无数据</div>}
			</div>
		);
	}
}

export default React.memo( Filter );
